<!--
 表格组件
 @Author: wangwj
 @Date: 2021-04-06
用风谷框架分页pagination传true
自己分页pageSize传值，父组件混入pagination。
-->
<template>
  <div>
    <dg-table
      :url="url"
      :lazyLoad="lazyLoad"
      :condition="condition"
      ref="table"
      v-loading="loading"
      :data="data"
      :pagination="pagination"
      :pagination-props="{ pageSize }"
      :border="border"
      :row-key="rowKey"
      lazy="lazy"
      :beforeSearch="beforeSearch"
      :default-sort="defaultSort"
      @select="(selection, row) => $emit('select', selection, row)"
      @change-current="(v) => $emit('pageChange', v)"
      @select-all="(selection, row) => $emit('selectAll', selection)"
      @selection-change="(row) => $emit('handleSelectionChange', row)"
      @row-click="(row) => $emit('handleRowClick', row)"
      @change-data="(val) => $emit('changeData', val)"
    >
      <template
        v-for="{
          label,
          prop,
          _render,
          width,
          type,
          sortable,
          ifTip = true,
          fixed = false,
          format,
          renderSelectable,
          code
        } in columns"
      >
        <el-table-column
          align="left"
          v-if="type === 'expand'"
          :key="prop"
          :label="label"
          type="expand"
          :width="width"
          :show-overflow-tooltip="ifTip"
          class="expand-table"
        >
          <template slot-scope="{ row }">
            <slot name="expand" :row="row" />
          </template>
        </el-table-column>
        <el-table-column
          align="left"
          v-if="type === 'index'"
          :key="prop"
          :label="label"
          type="index"
          :width="width || 70"
          :show-overflow-tooltip="ifTip"
        /> 
        <el-table-column
          v-else-if="type === 'selection'"
          :key="prop"
          align="left"
          :label="label"
          type="selection"
          :selectable="renderSelectable ? renderSelectable : () => true"
          :width="width"
          :show-overflow-tooltip="ifTip"
        /> 
        <el-table-column
          v-else-if="type == 'int'"
          :prop="prop"
          :key="prop"
          :label="label"
          :sortable="sortable"
          :width="width"
          :show-overflow-tooltip="ifTip"
        >
          <template slot-scope="{ row }">
            {{ row[prop] || 0 }}
          </template>
        </el-table-column>
        <!--附件展示-->
        <el-table-column
          v-else-if="type === 'fileHolderList'"
          :prop="prop"
          :key="prop"
          :label="label"
          :width="width">
          <template slot-scope="{ row }">
            <enclosure :files="row[prop]"></enclosure>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="type == 'operate'"
          :fixed="fixed"
          align="left"
          :key="prop"
          :label="label"
          :width="width"
        >
          <template slot-scope="{ row }">
            <slot :row="row" />
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="format"
          :key="prop"
          :label="label"
          :sortable="sortable"
          :width="width"
          :show-overflow-tooltip="ifTip"
        >
          <template slot-scope="{ row }">{{`${row[prop].slice(0,4)}-${row[prop].slice(4,6)}-${row[prop].slice(6,8)} ${row[prop].slice(8,10)}:${row[prop].slice(10,12)}:${row[prop].slice(12,14)}`}} </template>
        </el-table-column>
        <el-table-column
          v-else-if="code"
          :key="prop"
          :prop="prop"
          :label="label"
          align="left"
          :width="width"
          :sortable="sortable"
          :show-overflow-tooltip="ifTip"
        >
         <template slot-scope="{ row }">
           <!-- 判空处理 -->
           <span  v-if="!$lodash.isEmpty(row[prop])" v-translate="{ code, value: row[prop] }"></span> 
           <span  v-else>-</span>
         </template>
        </el-table-column>
        <el-table-column
          v-else-if="!_render"
          :key="prop"
          :prop="prop"
          :label="label"
          align="left"
          :width="width"
          :sortable="sortable"
          :show-overflow-tooltip="ifTip"
        >
           <template slot-scope="{ row }">
           <!-- 判空处理 -->
           <span>{{row[prop] | filterValue}}</span> 
         </template>
    </el-table-column>
        <el-table-column v-else :key="prop" :label="label" align="left" :width="width" :show-overflow-tooltip="ifTip">
          <template slot-scope="{ row, $index }">
            <div class="render">
              {{ createNode('_render_' + $index, _render(row, $index)) }}
              <slot :name="'_render_' + $index" />
            </div>
          </template>
        </el-table-column>
      </template>
    </dg-table>
    <div style="text-align: right; margin-top: 10px">
      <el-pagination
        v-if="pageSize && data.length"
        @size-change="(v) => $emit('onSizeChange', v)"
        @current-change="(v) => $emit('onCurrentChange', v)"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30]"
        :page-size="pageSize"
        :layout="layout"
        :total="total"
      />
    </div>
  </div>
</template>

<script>
import {parseTime} from "@/utils/common";
import dayjs from "dayjs";
import Enclosure from '@/components/layout/enclosure';

export default {
  name: 'commTable',
  components: {
    Enclosure
  },
  props: {
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    rowKey:{
       type: String,
       default:'id'
    },
    lazy: {
      type: Boolean,
      default: false
    },
    url: {
      type: String,
      default: ''
    },
    condition: {
      type: Object,
      default: () => {}
    },
    paginationProps: {
      type: Object,
      default: () => {}
    },
    border: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    },
    defaultSort: {
      type: Object,
      default: () => {}
    },
    pagination: {
      type: [Object, Boolean],
      default: true
    },
    currentPage: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 0
    },
    lazyLoad: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    columns: {
      deep: true,
      immediate: true,
      handler(val) {
        val.forEach((item) => {
          if (item.render && typeof item.render === 'function') {
            item._render = (row, _i) => item.render(this.$createElement, row, _i);
          }
        });
      }
    }
  },
  methods: {
    parseTime,
    searchForm() {
      this.$refs.table.searchForm();
    },
    reload(){
       this.$refs.table.reload();
    },
    resetFields(){
    this.$refs.table.resetFields();
    },
    createNode(key, vnode) {
      this.$slots[key] = vnode;
    },
    toggleRowSelection(row) {
      this.$refs.table.toggleRowSelection(row);
    },
    beforeSearch(conditions){
      // 当op="rangeDate"时，重写时间查询
      const searchCondition = JSON.parse(conditions.searchCondition);
      searchCondition.forEach(cond=>{
         if(cond.op === 'rangeDate'){
           cond.value = this.condition[cond.name].value.map((item, index) => {
              // TODO 目前默认日期选择范围开始时间为0点，结束时间为11点，后续考虑是否加个参数控制
              if (index === 0) {
                  return dayjs(item).format("YYYYMMDDHHmmss");
              } else {
                  return dayjs(item).format("YYYYMMDDHHmmss");
              }
          }).join(",")
         }
      });
      conditions.searchCondition = JSON.stringify(searchCondition);
      return conditions;
    }
  },
  filters:{
     filterValue(val){
       let result="-";
       if(val){
         result=val;
       }
       return result;
     }
  }
};
</script>
<style lang="scss" scoped>
.el-icon-loading {
  animation: rotating 2s linear infinite;
}
@keyframes rotating {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(1turn);
  }
}
</style>
